<template>
  <div class="material-print" ref="print">
    <h2>{{title}}结存单据</h2>
    <table  cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>仓库</th>
          <th>期间</th>
          <th>状态</th>
          <th>操作日期</th>
          <th>操作人</th>
        </tr>
      </thead>
      <tbody v-if="printData.length>0">
        <tr v-for="(item,index) in printData" :key="index">
          <td>{{item.whName}}</td>
          <td>{{item.period}}</td>
          <td>{{ item.checkFlag | fliterFlag }}</td>
          <td>{{item.createTime}}</td>
          <td>{{item.createBy}}</td>     
        </tr>
      </tbody>
    </table>
  </div>

</template>

<script>
  export default {
    data() {
      return {
      }
    },
    props: {
      printData: {
        type: Array,
        default () {
          return []
        }
      },
      title: {
        type: String,
        default () {
          return "仓库结存"
        }
      }
    },
      filters: {
    fliterFlag(status) {
      switch (status) {
        case "0":
          return "反结存";
          break;
        case "1":
          return "结存";
      }
    },
  },
  }
</script>

<style lang="scss" scoped="scoped">
  @media print {
    .material-print {
      display: block !important;
    }
  }

  .material-print {
    display: none;

    h2 {
      text-align: center;
      color: #515a6e;

    }

    table {
      width: 100%;
      margin-bottom: 20px;
      border-left: 1px solid #ccc;

      th {
        text-align: center;
        font-size: 14px;
        padding: 5px;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-top: 1px solid #ccc;
      }

      td {
        text-align: center;
        font-size: 13px;
        color: #606266;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        padding: 5px;
      }
    }
  }
</style>
